<div class="ql-padding row" *ngIf="action">
  <ng-container *ngIf="false; else action"></ng-container>
</div>
<ql-table #table [height]="height" [stripe]="true" [border]="true" [model]="source" [scroll-x]="true" center="all">
  <ng-container *ngIf="!showIndex; else indexColumn"></ng-container>
  <ng-container *ngIf="!selection; else selectionColumn"></ng-container>
  <ng-content></ng-content>
</ql-table>

<ng-template #selectionColumn>
  <ql-table-column model-key="__selection__" label="选择" width="60">
    <ng-template #slot let-scope="scope">
      <ql-checkbox
        [model]="scope.rowData.__selection__"
        (modelChange)="onCheckChange($event, scope.rowData)"
      ></ql-checkbox>
    </ng-template>
  </ql-table-column>
</ng-template>

<ng-template #indexColumn>
  <ql-table-column model-key="__index__" label="序号" width="60">
    <ng-template #slot let-scope="scope">
      {{ scope.rowData.index + 1 }}
    </ng-template>
  </ql-table-column>
</ng-template>

<ql-pagination
  *ngIf="page"
  (modelChange)="onPageChange($event)"
  [page-size]="page.pageSize"
  [page-sizes]="page.pageSizes"
  [total]="page.total"
  [layout]="['prev', 'pager', 'next', 'jumper', 'total']"
>
</ql-pagination>

<div *ngIf="cursor" class="row between-span ql-padding-y">
  <ql-button [qlDisabled]="!cursor.hasPrev" size="mini" (click)="cursorPrev$.next()">上一页</ql-button>
  <ql-button [qlDisabled]="!cursor.hasNext" size="mini" (click)="cursorNext$.next()">下一页</ql-button>
</div>
